<template>
	<view class="container">
		<!-- 房源列表 -->
		<z-paging ref="paging" v-model="houseList" @query="queryList" auto="false">
			<view slot="top">
				<view class="publisher-info">
					<image :src="posterInformation.avatar" mode="aspectFill" class="blur-avatar-bg">
					</image>
					<view class="info-content-bg"></view>
					<view class="info-content">
						<view class="info-left">
							<image class="avatar" :src="posterInformation.avatar" mode="aspectFill"></image>
							<text class="name">{{ posterInformation.nickname }}</text>
						</view>
						<view class="info-right" @click.stop="makePhoneCall(posterInformation)">
							<u-icon name="email" color="#ffffff" size="32rpx"></u-icon>
							消息
						</view>
					</view>
				</view>
			</view>
			<view class="notice-list">
				<view class="notice-item" v-for="(item, index) in houseList" :key="index" @click="$Tips('/pages/notice/notice-detail?id='+item.id)">
					<!-- 用户信息 -->
					<view class="user-info">
						<view class="user-info-left">
							<image class="avatar" :src="item.avatar" mode="aspectFill" @click.stop="toDetail(item)"></image>
							<text class="nickname">{{ item.name }}</text>
							<!-- <text class="location">IP{{ item.loginip }}</text> -->
							<view class="tag">便民广告</view>
						</view>
						<view class="user-info-right">
							<button class="share-item" open-type="share" @click.stop="detailInfo = item" hover-class='none'>
								<u-icon name="share" color="#ffffff" size="28rpx"></u-icon>
							</button>
						</view>
					</view>
					<!-- 价格区域 -->
					<view class="price-area">
						<text class="label">区域：</text>
						<text class="price">{{ item.area_info }}</text>
					</view>
					<!-- 公告内容 -->
					<view class="notice-content">
						<text class="content" >{{ item.desc }}</text>
					</view>
					<!-- 图片列表 -->
					<view class="image-list">
						<image @click.stop="ViewImage(index, item.photos_path)" v-for="(img, imgIndex) in item.photos_path"
							:key="imgIndex" :src="img" v-if="isImage2(img)" mode="aspectFill" class="notice-img">
						</image>
						<video v-for="(img, index) in item.photos_path" :src="img" v-if="isImage(img)" controls
							style="width: 100%; height: 166rpx"></video>
					</view>
					<!-- 地址信息 -->
					<view class="address-info">
						<u-icon name="map-fill" color="#07c160" size="32rpx"></u-icon>
						<text class="address">{{ item.address }}</text>
					</view>
					<!-- 底部信息 -->
					<view class="bottom-info">
						<view class="views">{{ item.click }}浏览</view>
						<view class="shares">{{ item.fen_num }}分享</view>
						<view class="time">{{ item.updatetime }}</view>
						<image :src="commentImg" @click.stop="handleInfoShow(index)"></image>
						<view class="pop_box" v-if="item.infoShow">
							<view class="pop_item" @click.stop="handlezan(item)">
								<!-- <image :src="icon21" style="width: 32rpx; height: 28rpx"></image> -->
								<u-icon name="heart" v-if="item.zan==0" color="#ffffff" size="32rpx"></u-icon>
								<u-icon name="heart-fill" v-if="item.zan==1" color="#f40f40" size="32rpx"></u-icon>
								<text>赞</text>
							</view>
							<view class="line"></view>
							<view class="pop_item" @click.stop="makeMsg(item)">
								<!-- <image src="/static/icon.png" style="width: 32rpx; height: 32rpx"></image> -->
								<u-icon name="attach" color="#ffffff" size="32rpx"></u-icon>
								<text>评论</text>
							</view>
							<view class="line"></view>
							<view class="pop_item" @click.stop="makePhoneCall(item)">
								<u-icon name="email" color="#ffffff" size="32rpx"></u-icon>
								<!-- <image :src="icon22" style="width: 32rpx; height: 32rpx"></image> -->
								<text>私信</text>
							</view>
						</view>
					</view>
					<view class="msgList-box" v-if="item.zan_user.length>0 ||item.comment_list.length>0 ">
						<view class="zan-box" v-if="item.zan_user.length>0">
							<view class="zan-title">{{item.zan_user.length}}赞</view>
							<u-avatar-group :urls="formatZanUser(item.zan_user)" size="24" gap="0.4"></u-avatar-group>
						</view>
						<view class="zan-line" v-if="item.zan_user.length>0&&item.comment_list.length>0"></view>
						<view v-if="item.comment_list.length>0">
							<view class="msgList" v-for="(c, v) in item.comment_list" :key="v">
								<view class="msmall">
									<text style="color: #2979ff" @click.stop="huifu(c, item)">{{ c.username }}</text>
									<text @click.stop="deleteComment(c)">：{{ c.content }}</text>
								</view>
								<view v-for="(a, b) in c.list">
									<view style="margin-top: 10rpx;display: flex;align-items: center;">
										<view @click.stop="huifu(c, item)">
											<text style="color: #2979ff">{{ a.username }}</text>
											回复
											<text style="color: #2979ff">{{ c.username }}</text>
										</view>
										<view @click.stop="deleteComment(a)">
											：{{ a.content }}
										</view>
									</view>
									<view v-for="(d, f) in a.list" :key="f">
										<view style="margin-top: 10rpx;display: flex;align-items: center;">
											<view @click.stop="huifu(d, item)">
												<text style="color: #2979ff">{{ d.username }}</text>回复
												<text style="color: #2979ff">{{ a.username }}</text>
											</view>
											<view @click.stop="deleteComment(d)"> ：{{ d.content }}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<u-modal :show="msgshow" :title="msgtitle" confirmText="确认" cancelText="取消" :showCancelButton="true"
			@cancel="msgshow = false" @confirm="sureconfirm">
			<view class="slot-content"
				style="border: 1px #999 solid;padding: 20rpx;border-radius: 10rpx;width: 96%;">
				<textarea v-model="msgcontent" style="height: 80px;width: 100%;" cols="3" rows="1"
					placeholder="请输入评论"></textarea>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getArea2,
		getpublishList,
		getcollect,
		addComment,
		delComment,
		sharePage
	} from "@/api/gent.js";
	export default {
		data() {
			return {
				msgshow: false,
				msgcontent: "",
				msgtitle: "随便说点什么",
				commentImg: this.$Config.HTTP_REQUEST_URL + "/img/icon20.png",
				houseList: [],
				pageNum: 1,
				pageSize: 3,
				total: 0,
				newhid: "",
				posterInformation: null,
				detailInfo:null,
				pjcontent:null
			};
		},
		onShareAppMessage(e) {
			if (e.from === "button") {
				// 来自页面内转发按钮
				this.getsharePage();
			}
			return {
				title: this.detailInfo.desc || '便民广告',
				path: "/pages/notice/notice-detail?id="+this.posterInformation.id,
				imageUrl: this.detailInfo.photos_path[0],
			};
		},
		onLoad(options) {
			if (options && options.publisher) {
				this.posterInformation = JSON.parse(options.publisher)
				this.refreshList()
			}
		},
		methods: {
			async getsharePage() {
				const res = await sharePage({
					id: this.detailInfo.id,
				});
			},
			deleteComment(item) {
				if (item.can_del == 0) {
					return false
				}
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除该评论信息吗？',
					success: (res) => {
						if (res.confirm) {
							delComment({
								comment_id: item.id
							}).then(res => {
								that.$Toast('删除成功');
								that.refreshList();
							});
						}
					}
				});
			},
			makeMsg(val) {
				this.pjcontent = val;
				val.infoShow = false;
				this.msgtitle = "随便说点什么";
				this.msgshow = true;
			},
			sureconfirm() {
				if (this.msgcontent == "") {
					return this.$Toast('请输入内容')
				}
				addComment({
					pub_id: this.pjcontent.id,
					content: this.msgcontent,
					pid: this.newhid,
				}).then(res => {
					this.msgshow = false;
					this.msgcontent = ''
					this.$Toast('提交成功')
					this.refreshList();
				})
			},
			huifu(val, id) {
				this.msgcontent = "";
				this.pjcontent = id;
				this.msgshow = true;
				this.msgtitle = "回复:" + val.username;
				this.newhid = val.id;
			},
			isImage(url) {
				return /\.(mp4)$/i.test(url);
			},
			isImage2(url) {
				return /\.(jpg|jpeg|png|gif)$/i.test(url);
			},
			ViewImage(index, arr) {
				let filteredPaths = arr.filter((path) => !path.endsWith(".mp4"));
				uni.previewImage({
					current: filteredPaths[index], //当前点击的图片链接
					urls: filteredPaths, //数组
				});
			},
			refreshList() {
				if (this.$refs.paging) {
					this.$refs.paging.refresh();
				}
			},
			queryList(pageNo, pageSize) {
				getpublishList({
					limit: pageSize,
					page: pageNo,
					type: '2',
					publisher: this.posterInformation.user_id
				}).then(res => {
					if (res.data.data.data) {
						res.data.data.data.forEach((item) => {
							item.infoShow = false;
						});
					}
					this.$refs.paging.complete(res.data.data.data);
				}).catch(error => {
					this.$refs.paging.complete(false);
				})
			},
			handlezan(item) {
				let operateType = item.zan == 1 ? 2 : 1
				getcollect({
					id: item.id,
					type: 2, //1收藏2点赞
					operate_type: operateType, //  1确认2取消
				}).then(res => {
					if (operateType == 1) {
						this.$Toast('已点赞')
					} else {
						this.$Toast('取消点赞')
					}
					item.infoShow = false;
					this.refreshList();
				})
			},
			makePhoneCall(item) {
				this.$Tips('/pages/message/privateMessageChat?user_id=' + item.user_id + '&name=' + item.nickname)
			},
			formatZanUser(zanUser) {
				return zanUser.map(user => user.avatar);
			},
			handleInfoShow(v) {
				this.houseList[v].infoShow = !this.houseList[v].infoShow;
			},
		},
	};
</script>

<style lang="less" scoped>
	.msgtitle {
		font-weight: 500;
		padding-bottom: 20rpx;
		border-bottom: 1px #f5f6fa solid;
		color: #666;
		margin-top: 30rpx;
	}

	.msgList-box {
		background: rgba(0, 149, 248, 0.08);
		border-radius: 12rpx;
		padding: 20rpx;
		margin-top: 20rpx;

		.zan-box {
			display: flex;
			align-items: center;

			.zan-title {
				font-size: 26rpx;
				color: #8082A3;
				margin-right: 20rpx;

			}
		}

		.zan-line {
			height: 1px;
			background: #D1D2D4;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}
	}

	.msgList {
		// padding: 20rpx 10rpx;
		// display: flex;
		color: #666;

		.msmall {
			display: flex;
			width: 100%;
			margin-bottom: 20rpx;
		}

		.mgsName {
			color: #2979ff !important;
		}
	}

	.container {
		min-height: 100vh;

		padding-top: constant(safe-area-inset-top);
		/* 为了适配刘海屏等 */
		padding-top: calc(env(safe-area-inset-top));
		/* 为了适配刘海屏等 */
	}

	.publisher-info {
		position: relative;
		width: 100%;
		height: 300rpx;
		padding: 24rpx 0;

		.blur-avatar-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 250rpx;
			filter: blur(20rpx);
			transform: scale(1.2);
			z-index: 1;
			overflow: hidden;
		}

		.info-content-bg {
			position: absolute;
			top: 220rpx;
			left: 0;
			width: 100%;
			height: 150rpx;
			background: linear-gradient(360deg, #F5F6FA, #D7EAFA);
			z-index: 1;
		}

		.info-content {
			position: relative;
			z-index: 2;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding: 24rpx;
			top: 120rpx;

			.info-left {
				display: flex;
				align-items: flex-end;

				.avatar {
					border-radius: 16rpx;
					width: 144rpx;
					height: 144rpx;
					border: 2px solid rgba(255, 255, 255, 1);
					margin-right: 16rpx;
				}

				.name {
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
			}

			.info-right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #fff;
				box-shadow: 0px 2px 4px 0px rgba(0, 149, 248, 0.5);
				background-color: rgba(0, 149, 248, 1);
				border-radius: 28rpx;
				padding: 8rpx 22rpx;
				margin-bottom: 20rpx;

				u-icon {
					margin-right: 8rpx;
				}
			}
		}
	}

	.notice-list {
		padding: 0 24rpx 24rpx;
		position: relative;
		z-index: 10;

		.notice-item {
			background: #fff;
			border-radius: 12rpx;
			padding: 24rpx;
			margin-bottom: 24rpx;

			.user-info {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 24rpx;
				.user-info-left {
					display: flex;
					align-items: center;
				}
				
				.user-info-right {
				
					button {
						margin: unset;
						padding: unset;
						background-color: #ffffff;
					}
				
					button::after {
						border: none;
					}
				
					.share-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						padding: 10rpx;
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background: #2979ff;
						margin-bottom: 16rpx;
				
						text {
							margin-top: 10rpx;
							font-size: 24rpx;
							color: #ffffff;
						}
					}
				}

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}

				.nickname {
					font-size: 28rpx;
					color: #333;
					margin-right: 16rpx;
				}

				.location {
					font-size: 24rpx;
					color: #999;
					flex: 1;
				}

				.tag {
					font-size: 24rpx;
					color: #2979ff;
					background: rgba(41, 121, 255, 0.1);
					padding: 4rpx 16rpx;
					border-radius: 4rpx;
				}
			}

			.price-area {
				margin-bottom: 24rpx;

				.label {
					font-size: 28rpx;
					color: #666;
				}

				.price {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
			}

			.notice-content {
				font-size: 28rpx;
				color: #333;
				line-height: 1.5;
				margin-bottom: 24rpx;
			}

			.image-list {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 8rpx;
				margin-bottom: 24rpx;

				.notice-img {
					width: 100%;
					height: 160rpx;
					border-radius: 8rpx;
				}
			}

			.address-info {
				display: flex;
				align-items: center;
				margin-bottom: 24rpx;

				.address {
					font-size: 26rpx;
					color: #07c160;
					margin-left: 8rpx;
				}
			}

			.bottom-info {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999;
				position: relative;

				.views,
				.shares {
					margin-right: 16rpx;
				}

				.time {
					flex: 1;
				}

				image {
					width: 40rpx;
					height: 36rpx;
				}

				.pop_box {
					right: 66rpx;
					padding: 0 20rpx;
					height: 78rpx;
					background: #4c4c4c;
					border-radius: 8rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;

					.line {
						width: 2rpx;
						height: 46rpx;
						box-sizing: border-box;
						border: 2rpx solid #979797;
						margin: 0 42rpx;
					}

					.pop_item {
						display: flex;
						align-items: center;
						gap: 10rpx;

						image {
							margin-right: 12rpx;
						}
					}
				}
			}
		}
	}

	.dropdown-content {
		top: 84rpx;
		left: 0;
		right: 0;
		z-index: 100;
		position: absolute;

		.content {
			position: relative;
			background-color: #fff;
			z-index: 99;
			border-radius: 0 0 16rpx 16rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

			.option-list {
				padding: 20rpx 0;

				.tags-list {
					display: flex;
					flex-wrap: wrap;
					gap: 16rpx;
					margin-bottom: 24rpx;

					.tag-item {
						padding: 12rpx 24rpx;
						font-size: 24rpx;
						color: #666;
						background: #f5f5f5;
						border-radius: 4rpx;

						&.active {
							color: #2979ff;
							background: rgba(41, 121, 255, 0.1);
						}
					}
				}

				.type_cz {
					padding: 0 30rpx;

					.title {
						font-size: 26rpx;
						color: #666666;
						margin-bottom: 20rpx;
						margin-top: 20rpx;
					}
				}

				.option-item {
					padding: 20rpx 32rpx;

					.option-text {
						font-size: 26rpx;
						color: #666666;

						&.active {
							color: #2979ff;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
</style>